<template>
	<div class="app-container">
		<el-form
			:model="queryParams"
			ref="queryForm"
			size="small"
			:inline="true"
			v-show="showSearch"
		>
			<el-form-item :label="$t('holiday_name')" prop="leaveName">
				<el-input
					v-model="queryParams.leaveName"
					:placeholder="
						$t('please_enter', { name: $t('holiday_name') })
					"
					:show-word-limit="true"
					clearable
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item
				:label="$t('select_employing_company')"
				prop="employerId"
			>
				<employerSelect
					v-model="queryParams.employerId"
				></employerSelect>
			</el-form-item>
			<el-form-item :label="$t('employee_name')" prop="employeeName">
				<el-input
					v-model="queryParams.employeeName"
					:placeholder="
						$t('please_enter', { name: $t('employee_name') })
					"
					:show-word-limit="true"
					clearable
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					size="mini"
					@click="handleQuery"
					>{{ $t('search') }}</el-button
				>
				<el-button
					icon="el-icon-refresh"
					size="mini"
					@click="resetQuery"
					>{{ $t('reset') }}</el-button
				>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<right-toolbar
				:showSearch.sync="showSearch"
				@queryTable="getList"
			></right-toolbar>
		</el-row>

		<el-table
			v-loading="loading"
			:data="applicationList"
			@selection-change="handleSelectionChange"
			:max-height="tableHeight"
		>
			<el-table-column
				:label="$t('employee_name')"
				align="center"
				prop="employeeName"
				:show-overflow-tooltip="true"
			/>
			<el-table-column
				:label="$t('employing_company')"
				align="employerName"
				prop="employerName"
				:show-overflow-tooltip="true"
			/>
			<el-table-column
				:label="$t('holiday_name')"
				align="center"
				prop="vacationName"
				:show-overflow-tooltip="true"
			/>
			<el-table-column
				:label="$t('total_duration_application')"
				align="center"
				prop="leaveDuration"
				:show-overflow-tooltip="true"
			>
				<template slot-scope="scope">
					{{ scope.row.leaveDays + scope.row.advanceLeaveDays }}
				</template>
			</el-table-column>
			<el-table-column
				:label="$t('remaining_duration')"
				align="center"
				prop="remaindeLeaveDays"
				:show-overflow-tooltip="true"
			>
				<!-- {{ scope.row.modifyDays +  scope.row.remaindeLeaveDays}} -->
			<template slot-scope="scope">
        {{
					scope.row.totalVacationDuration -
					scope.row.leaveDays +
					scope.row.modifyDays
				}}
      </template>
			</el-table-column>
			<el-table-column
				:label="$t('action')"
				align="center"
				class-name="small-padding fixed-width"
			>
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-view"
						v-hasPermi="['vacation:vacationReport:list']"
						@click="handleView(scope.row)"
						>{{ $t('view') }}</el-button
					>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleUpdate(scope.row)"
						>{{ $t('modify') }}</el-button
					>
					<!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['vacation:vacationReport:delete']"
            >{{ $t("delete") }}</el-button
          > -->
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total > 0"
			:total="total"
			:page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize"
			@pagination="getList"
      :page-sizes="[10,20,30,50,100, 200]"
		/>

		<!-- 添加或修改假期申请对话框 -->
		<el-dialog
			:title="title"
			:visible.sync="open"
			width="1000px"
			append-to-body
		>
			<div v-loading="lookViewLoading">
				<employeeHeader :form="form" v-if="open">
					<el-descriptions-item
						:label="$t('employer')"
						slot="customLabel"
					>
						{{ form.employer.employerName }}</el-descriptions-item
					>
				</employeeHeader>
				<el-card class="box-card" style="margin-bottom: 20px">
					<div slot="header" class="clearfix">
						<span>{{ $t('holiday_type') }}</span>
					</div>
					<el-descriptions :column="2">
						<el-descriptions-item :label="$t('holiday_name')">{{
							form.jqVacationReportDTO.vacationName
						}}</el-descriptions-item>
						<el-descriptions-item
							:label="$t('total_duration_vacation')"
							>{{
								form.jqVacationReportDTO.totalVacationDuration
							}}</el-descriptions-item
						>
					</el-descriptions>
					<el-descriptions :column="2">
						<el-descriptions-item
							:label="$t('total_duration_application')"
							>{{
								form.jqVacationReportDTO.leaveDays +
								form.jqVacationReportDTO.advanceLeaveDays
							}}</el-descriptions-item
						>
						<el-descriptions-item :label="$t('holiday_name')">{{
							form.jqVacationReportDTO.vacationName
						}}</el-descriptions-item>
					</el-descriptions>
				</el-card>
				<el-card class="box-card" style="margin-bottom: 20px">
					<div slot="header" class="clearfix">
						<span>{{ $t('leave_application_record') }}</span>
					</div>
					<el-table :data="form.employerLeaveList" border>
						<!-- <el-table-column
              label="雇员姓名"
              align="center"
              prop="employeeName"
              :show-overflow-tooltip="true"
            >
            </el-table-column> -->
						<el-table-column
							:label="$t('application_time')"
							align="center"
							prop="createTime"
							:show-overflow-tooltip="true"
						/>
						<el-table-column
							:label="$t('holiday_name')"
							align="center"
							prop="vacationName"
							:show-overflow-tooltip="true"
						/>
						<el-table-column
							:label="$t('application_days')"
							align="center"
							prop="leaveDays"
							:show-overflow-tooltip="true"
						/>
						<el-table-column
							:label="$t('application_start_time')"
							align="center"
							prop="leaveStartDate"
							:show-overflow-tooltip="true"
						>
						</el-table-column>
					</el-table>
				</el-card>
			</div>
		</el-dialog>
		<modifyLeave ref="modifyLeave" />
	</div>
</template>

<script>
import {
	listApplication,
	getApplication,
	delApplication,
	updateApplication,
	addApplication,
	changeReport,
} from '@/api/custom/vacationReport';
import employerSelect from '@/views/components/custom/employerSelect.vue';
import employeeHeader from './header';
import modifyLeave from '@/components/modifyLeave/index';
export default {
	name: 'Application',
	components: { employerSelect, employeeHeader, modifyLeave },
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 假期申请表格数据
			applicationList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				leaveName: null,
				employerId: null,
				employeeName: null,
			},
			// 表单参数
			form: {
				employee: {},
				employer: {},
				employment: {},
				jqVacationReportDTO: {},
			},
			// 表单校验
			rules: {},
			lookViewLoading: false,
			employeeInfo: {},
			deptOptions: [],
			vacationList: [],
		};
	},
	created() {
		this.getList();
	},
	methods: {
		/** 查询假期申请列表 */
		getList() {
			this.loading = true;
			listApplication(this.queryParams).then((response) => {
				this.applicationList = response.data.records;
				this.total = response.data.total;
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id);
			this.single = selection.length !== 1;
			this.multiple = !selection.length;
		},
		/** 查看按钮操作 */
		handleView(row) {
			this.lookViewLoading = true;
			let data = {
				employeeId: row.employeeId,
				employerId: row.employerId,
				vacationId: row.vacationId,
			};
			getApplication(data).then((response) => {
				this.form = response.data;
				this.open = true;
				this.title = this.$t('view');
				this.lookViewLoading = false;
			});
		},
		changeHoilday(e) {
			e.isEdit = false;
			let data = {
				vacationId: e.vacationId,
				modifyDays: Number(e.modifyDays),
				employeeId: e.employeeId,
				employerId: e.employerId,
			};
			changeReport(data).then((response) => {
				this.$modal.msgSuccess(this.$t('operation_successful'));
				this.getList();
			});
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.$refs['modifyLeave'].open(row);
			// this.lookViewLoading = true;
			// let data = {
			//   employeeId: row.employeeId,
			//   employerId: row.employerId,
			//   vacationId: row.vacationId,
			// };
			// getApplication(data).then((response) => {
			//   this.form = response.data;
			//   this.open = true;
			//   this.title = this.$t("view");
			//   this.lookViewLoading = false;
			// });
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					if (this.form.id != null) {
						updateApplication(this.form).then((response) => {
							this.$modal.msgSuccess(
								this.$t('operation_successful')
							);
							this.open = false;
							this.getList();
						});
					} else {
						addApplication(this.form).then((response) => {
							this.$modal.msgSuccess(
								this.$t('operation_successful')
							);
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id || this.ids;
			this.$modal
				.confirm(this.$t('delete_data'))
				.then(function () {
					return delApplication(ids);
				})
				.then(() => {
					this.getList();
					this.$modal.msgSuccess(this.$t('operation_successful'));
				})
				.catch(() => {});
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download(
				'application/application/export',
				{
					...this.queryParams,
				},
				`application_${new Date().getTime()}.xlsx`
			);
		},
	},
};
</script>
